<template>
  <Header></Header>
  <div class="detail-title">
    <div class="detail-main">
      <div class="detail-map">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>课程</el-breadcrumb-item>
          <el-breadcrumb-item>免费课</el-breadcrumb-item>
          <el-breadcrumb-item>PC端 + 移动端网站布局和特效</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="detail-name">从入门到实战</div>
      <div class="detail-content">难度 入门</div>
    </div>
  </div>
  <div class="detail-container">
    <div class="tab-name">
      <ul>
        <li class="active">章节</li>
        <li>下载笔记代码</li>
      </ul>
    </div>
    <div class="tab-chapters">
      <div class="tab-txt">
        <div class="txt-content">
          TypeScript是一种由微软开发的自由和开源的编程语言。
          它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
          安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。
        </div>
        <div class="txt-btn">
          <div class="payment">立即购买</div>
          <div class="add-cart">加入购物车</div>
        </div>
      </div>
      <div class="detail-list">
        <div class="item">
          <div class="item-title">
            <div class="item-name">TypeScript基础入门</div>
            <div class="item-key">TypeScript基础入门</div>
          </div>
          <ul>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
          </ul>
        </div>
        <div class="item">
          <div class="item-title">
            <div class="item-name">TypeScript基础入门</div>
            <div class="item-key">TypeScript基础入门</div>
          </div>
          <ul>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
            <li>
              <div class="course">
                <el-icon :size="20"><VideoCameraFilled /></el-icon>
                <div>视频：TypeScript是什么？</div>
              </div>
              <div class="course-video">开始学习</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import Footer from "@/components/Footer/index.vue";
import { ArrowRight, VideoCameraFilled } from "@element-plus/icons-vue";
</script>

<style scoped>
.detail-title {
  width: 100%;
  height: 183px;
  background: url("@/assets/image/detail-bg.png");
  background-size: 100% 100%;
}
.detail-main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
::v-deep .el-breadcrumb__separator {
  color: #fff;
}
::v-deep .el-breadcrumb__inner {
  color: #fff;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: #fff;
  font-weight: 500;
}
.detail-name {
  font-size: 27px;
  font-weight: 500;
  color: #fff;
}
.detail-content {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}
.tab-name {
  width: 100%;
  height: 57px;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}
.tab-name ul {
  width: 1000px;
  height: 57px;
  align-items: center;
  margin: 0 auto;
  display: flex;
  font-size: 16px;
}
.tab-name ul li + li {
  margin-left: 67px;
}
.tab-name ul li.active {
  position: relative;
  color: #388fff;
  font-weight: bold;
}
.tab-name ul li.active::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -20%;
  bottom: -6px;
  width: 40%;
  height: 3px;
  background: #388fff;
  border-radius: 1px;
}
.tab-chapters {
  width: 1000px;
  margin: 0 auto;
}
.tab-txt {
  margin: 29px 0;
  width: 100%;
  height: 147px;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
}
.txt-content {
  padding: 24px 27px;
}
.txt-btn {
  display: flex;
  justify-content: end;
}
.payment {
  margin-right: 13px;
  width: 99px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #f11d1d;
  border-radius: 15px;
  cursor: pointer;
}
.add-cart {
  margin-right: 33px;
  width: 99px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  color: #f11d1d;
  background: #fde7e7;
  border-radius: 15px;
  cursor: pointer;
}
.detail-list {
  margin-top: 30px;
}
.item {
  width: 100%;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
  margin-bottom: 10px;
}
.item-title {
  padding: 16px 27px;
}
.item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.item-key {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #5c5c5c;
}
.item ul li {
  display: flex;
  justify-content: space-between;
  padding: 16px 27px;
}
.item ul li .course {
  display: flex;
}
.course {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.course .el-icon {
  margin-right: 7px;
}
.course-video {
  width: 73px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  background: #388fff;
  border-radius: 8px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}
</style>
